<template>
  <el-main class="main">
    <div class="main-header">
      <div class="header-search">
        <span style="margin-right: 10px;">请输入疾病名称:</span>
        <el-input v-model="input" class="w-50 m-2" style="width: 200px;" placeholder="请输入疾病名称">
          <template #prefix>
            <el-icon class="el-input__icon">
              <search />
            </el-icon>
          </template>
        </el-input>
        <span>
          <el-button type="primary" style="margin-left: 15px;" @click.prevent="searchData">搜索</el-button>
          <el-button type="primary" style="margin-left: 15px;" @click="resetSearch">清空</el-button>
          <el-button type="primary" style="margin-left: 15px;" @click="confirmSelection">确定</el-button>
        </span>
      </div>
    </div>
    <div class="main-body">
      <el-row>
        <el-col :span="24">
          <el-table :data="userList" v-loading="loading" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" style="text-align: center;" />
            <el-table-column :label="fen" prop="result" style="text-align: center;" />
          </el-table>
          <!-- <el-pagination small background layout="prev, pager, next" :page-size="10" :total="total" class="mt-4" /> -->
        </el-col>
        <el-pagination
                    v-model="currentPage"
                    :total="total"
                    :page-size="pageSize"
                    @current-change="handleCurrentChange"
                    />
      </el-row>
    </div>
  </el-main>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

onMounted(() => {
  selectUser();
});

const input = ref('');
const userList = ref([]);
const loading = ref(false);

const total = ref(0); 
const pageSize = ref(10); 
const currentPage = ref(1); 

const selectedRows = ref([]); 
const fen = ref("疾病名称");

const resetSearch = () => {
  fen.value = "疾病名称";
  input.value = '';
  selectUser();
};

const handleSelectionChange = (list) => {
  selectedRows.value = list;
}

const searchData = () => {
  const name = input.value;
  axios
    .get(`http://localhost:8080/ResultProject/queryName?result=${name}`)
    .then((res) => {
      userList.value = res.data.data;
      total.value = res.data.data.length; 
      console.log(userList.value)
    })
    .catch((error) => {
      console.error(error);
    });
};

const selectUser = () => {
  axios
    .get(`http://localhost:8080/ResultProject/page1?page=${currentPage.value}&pageSize=${pageSize.value}`)
    .then((res) => {
      userList.value = res.data.data.rows;
      console.log(userList.value)

      total.value = res.data.data.total;
      console.log(total.value ); 

    })
    .finally(() => {
      loading.value = false;
    });
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  console.log(currentPage.value);
  selectUser();
};

const confirmSelection = () => {
  const selectedData = selectedRows.value.map((row) => row.result);
  console.log(selectedData);

  console.log(selectedRows.value);
  axios.post(`http://localhost:8080/ResultProject/test?selectedData=` + selectedData).then((result) => {
    let tem = [];
    userList.value = [];
    fen.value = "体检项目";
    tem = result.data.data;
    total.value = tem.length;
    tem.forEach((e) => {
      console.log(e);
      const temp = {
        result: e
      }
      userList.value.push(temp);
    })
    console.log(userList.value)
  })


};

</script>

<style lang="scss">
.main {
  height: 100%;
  background-color: rgb(250, 252, 253);

  .main-body {
    margin-top: 14px;
    border-radius: 10px;
    height: calc(86vh - 100px);
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .main-header {
    height: 80px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);

    .header-search {
      padding: 10px 0 0 10px;
    }
  }
}
</style>
